<template>
<!-- 主题 -->
<div class="content-warp">
      <div class="theme-warp">
        <div class="theme-one" v-for="theme in discoveryStore.themeList.content" :key="theme.id">
            <img :src="theme.cover">
        </div>
        
      </div>
</div>
</template>
  
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import useDiscoveryStore from '@/store/discovery'
const discoveryStore = useDiscoveryStore()


onMounted(()=>{
    discoveryStore.getThemeList()
})
</script>

<style scoped lang="less">
.content-warp {
    margin: 15px auto;
    width: 1200px;
    .theme-warp{
        display: flex;
        justify-items: start;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 40px;
        .theme-one{
            width: 286px;
            height: 156px;
            margin-bottom: 16px;
            &:not(:nth-child(4n)){
                margin-right: 16px;
            }
            &>img{
                width: 100%;
                height: 100%;
                border-radius: 10px;
            }
        }
    }
 }
</style>